import BaseView from "../baseView.js";


export default class updataSeats extends BaseView {
    constructor(id, seatId) {
        super(id);
        this.seatsId = seatId;
        this.mouted()

    }
    mouted() {

        $.ajax({
            type: "get",
            url: "/seats/seatsDatail/" + this.seatsId,
            dataType: 'json',
            success: (data) => {
                console.log(data);
                let res = data.data;
                $('#student_name').val(res.row);
                $('#student_age').val(res.col);
                $('#student_score').val(res.displayName);
                $('#student_add').val(res.theaterId);
               
                //渲染页面
                // newform.render()
            }
        })
    }
    render() {
        $('#Content').html(`
        <div style="margin: 30px 10px 0 20px " id='nav'>
        <span class="layui-breadcrumb">
            <a>选座管理系统/</a>
            <a>选座资料管理/</a>
            <a>修改选座数据列表</a>
         </span>
         <hr/>
        </div>
        <h1 style="margin: 10px 10px 0 20px ">修改选座</h1>
        <hr/>
        <div style='width:300px;margin:auto'>
        <form class="layui-form" action="" lay-filter="formTest" >
        <div class="layui-form-item">
            <label class="layui-form-label">行</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入行" autocomplete="off"
                    class="layui-input" id="student_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">列</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入列" autocomplete="off"
                    class="layui-input" id="student_age">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">电影名字</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入名字" autocomplete="off"
                    class="layui-input" id="student_score">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电影编号</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入ID" autocomplete="off"
                    class="layui-input" id="student_add">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
            <button type='button' id='modifyButton' class="layui-btn" lay-submit lay-filter="formDemo">确定修改</button>
            <button type='button' id='backBtn' class="layui-btn" lay-submit lay-filter="formDemo">返回</button>
            </div>
        </div>
        </form>
        </div>
        `)
    }


    handle() {
        $("script[type='module']").append(`
        //获得表单
        var newform=null;
        <script>
        //Demo
        layui.use(['element','form'], function(){
            var form = layui.form,
            element = layui.element;
            //获取表单
            newform=form
            element.render('#nav')
            });
        </script>
        `)
        $('#backBtn').click(() => {
            window.location.hash = '#/main/seatsList'
        })
        $('#modifyButton').click(() => {
            $.ajax({
                type: 'put',
                url: '/seats/modifyPosition/',
                data: {
                    id: this.seatsId,
                    row: $('#student_name').val(),
                    col: $('#student_age').val(),
                    displayName: $('#student_add').val(),
                    theaterId: $('#student_score').val(),
                },
                dataType: 'json',
                success: (data) => {
                    if (data.code == 1) {
                        alert(data.msg);
                        window.location.hash = '#/main/seatsList'
                    }else{
                        alert(data.msg);
                    }
                }

            })
        })
    }
}